<!DOCTYPE html>
<html lang="en" class="no-js">

<!-- Head -->

<head>
  <!-- Meta data -->
  <meta charset="utf-8">
  <title>jsGantt Improved</title>
  <meta name="description" content="FREE javascript gantt - jsGantt Improved HTML, CSS and AJAX only">
  <meta name="keywords" content="jsgantt-improved free javascript gantt-chart html css ajax">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <style>
    .row [type=checkbox] {
      margin-right: 10px
    }

    .row {
      width: 100%
    }

    .space {
      display: inline-block;
      width: 30px;
    }

    .deadline-line {
      position: absolute;
      top: 0;
      width: 1px;
      height: 22px;
      background: #777777;
    }
    @media print {
      .no-print {
        display: none;
      }
    }
  </style>
  <!-- External resources -->
  <!-- jQuery + Ajax [required by Bootstrap] -->
  <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"
    integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n"
    crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"
    integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb"
    crossorigin="anonymous"></script>
  <!-- Required by smooth scrolling -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <!-- Bootstrap v4.0.0 Alpha -->
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"
    integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn"
    crossorigin="anonymous"></script>
  <!-- Google Fonts -->
  <link href="https://fonts.googleapis.com/css?family=Cookie|Satisfy|Kelly+Slab|Overlock" rel="stylesheet">

  <!-- jsGanttImproved App -->
  <link href="../dist/jsgantt.css" rel="stylesheet" type="text/css" />
  <script src="../dist/jsgantt.js" type="text/javascript"></script>
</head>

<!-- Content -->

<body data-spy="scroll" data-target="#my-navbar-nav" style="padding: 30px;">

<div class="no-print">
  <div class="row">
    <h3 class="row">Hide and Show Properties</h3>

    <div class="row">
      <span>
        <label for="vShowRes">Responsible</label>
        <input type="checkbox" id="vShowRes" checked onchange="start(event)" />
      </span>

      <span>
        <label for="vShowDur">Duration</label>
        <input type="checkbox" id="vShowDur" checked onchange="start(event)" />
      </span>

      <span>
        <label for="vShowCost">Cost</label>
        <input type="checkbox" id="vShowCost" checked onchange="start(event)" />
      </span>

      <!--       <span>
        <label for="vShowAddEntries">Add Entry</label>
        <input type="checkbox" id="vShowAddEntries" checked onchange="start(event)" />
      </span> -->

      <span>
        <label for="vShowComp">Comp</label>
        <input type="checkbox" id="vShowComp" checked onchange="start(event)" />
      </span>

      <span>
        <label for="vShowTaskInfoLink">tooltip</label>
        <input type="checkbox" id="vShowTaskInfoLink" checked onchange="start(event)" />
      </span>

      <span>
        <label for="vShowEndWeekDate">date for the last day of the week</label>
        <input type="checkbox" id="vShowEndWeekDate" onchange="start(event)" />
      </span>



    </div>

    <span>
      <label for="vShowStartDate">StartDate</label>
      <input type="checkbox" id="vShowStartDate" checked onchange="start(event)" />
    </span>

    <span>
      <label for="vShowEndDate">EndDate</label>
      <input type="checkbox" id="vShowEndDate" checked onchange="start(event)" />
    </span>

    <span>
      <label for="vShowPlanStartDate">Planned StartDate</label>
      <input type="checkbox" id="vShowPlanStartDate" checked onchange="start(event)" />
    </span>

    <span>
      <label for="vShowPlanEndDate">Planned EndDate</label>
      <input type="checkbox" id="vShowPlanEndDate" checked onchange="start(event)" />
    </span>
  </div>


  <br>

  Choose a language:
  <select id="lang" onchange="start(event)">
    <option value='cn'>Chinese (cn)</option>
    <option value='cs'>Czech (cs)</option>
    <option value='nl'>Dutch (Standard)</option>
    <option value='en' selected>English (en)</option>
    <option value='fr'>French (fr)</option>
    <option value='de'>German (de)</option>
    <option value='hu'>Hungarian (hu)</option>
    <option value='id'>Indonesian (id)</option>
    <option value='ja'>Japanese (ja)</option>
    <option value='pt'>Portuguese (pt)</option>
    <option value='ru'>Russian (ru)</option>
    <option value='es'>Spanish (es)</option>
    <option value='sv'>Swedish (sv)</option>
    <option value='tr'>Turkish (tr)</option>
  </select>

  <br />
  Data getting from a URL, <a href="fixes/data.json">JSON Data</a>. Use `bigdata.json` to test with more data.
  <input id="dataurl" onchange="start(event)" value="./fixes/data.json" type="text">
  <br />

  Delay for tooltip to hide (in ms): <input id="delay" onchange="start(event)" value="150" type="number">

  UseSingleCell: <input id="useSingleCell" onchange="start(event)" value="100000" type="number">


  <br />

  <span>
    <label>Configure debug and see in console:</label>
    <input type="checkbox" id="debug" onchange="start(event)" />
  </span>

  <br />

  <span>
    <label>Configure editable:</label>
    <input type="checkbox" id="editable" checked onchange="start(event)" />
  </span>

  <br />

  <span>
    <label>Configure sortTasks:</label>
    <input type="checkbox" id="sort" onchange="start(event)" />
  </span>

  <span>
    <label>Show Weekenddays:</label>
    <input type="checkbox" id="vShowWeekends" checked onchange="start(event)" />
  </span>




  <br />


<!--  <span>-->
    <label>Height:</label>
    <input type="text" id="vTotalHeight" fl onchange="start(event)" />
    (CSS style height like "300px". Empty for auto height)


    <br /><br />
    <span>
      <label>Custom elements (black lines for deadlines):</label>
      <input type="checkbox" id="customElements" checked onchange="start(event)" />
      <div class="space"></div>
      <label>Min Date:</label>
      <input type="date" id="vMinDate" onchange="start(event)" />
      <div class="space"></div>
      <label>Max Date:</label>
      <input type="date" id="vMaxDate" onchange="start(event)" />
    </span>

    <br />

    <span>
      <label>Custom Tooltip Template:</label><br />
      <textarea id="tooltiptemplate"
        onchange="start(event)"><div>Nome: {{pName}}</div> <div>{{Lang:pStart}}: {{pStart}}</div></textarea>
      <div class="space"></div>
      <label>Dynamic tooltip:</label>
      <input type="checkbox" id="dynamicTooltip" checked onchange="start(event)" />
    </span>


    <br /><br />
    <span>
      <label>Custom columns order:</label>
      <input type="text" id="vColumnOrder" onchange="start(event)" />
      <!-- value="vShowDur,vShowComp,vShowRes,vShowStartDate,vShowEndDate,vShowPlanStartDate,vShowPlanEndDate,vShowCost,vAdditionalHeaders,vShowAddEntries"  -->
    </span>



    <br />

    <span>
      <button onclick="clearTasks()">Clear all tasks</button>
    </span>

    <span>
      <button onclick="printTasksInConsole()">Print data in console</button>
    </span>

    <br />
    
    <select id="print_page_size">
        <option value="210,297">A4 Portrait</option>
        <option value="297,210">A4 Landscape</option>
        <option value="297,420">A3 Portrait</option>
        <option value="420,297">A3 Landscape</option>
        <option value="420,594">A2 Portrait</option>
        <option value="594,420">A2 Landscape</option>
        <option value="594,841">A1 Portrait</option>
        <option value="841,594">A1 Landscape</option>
        <option value="841,1189">A0 Portrait</option>
        <option value="1189,841">A0 Landscape</option>
    </select>
    <button onclick="printChart()">Print</button>

    <br>

    <small>
      * Click events in table are binded to console.log for testing
    </small>


    <br /><br />
  </div>
    <div id="embedded-Gantt">
    </div>

</body>
<script type="text/javascript" src="index.js"></script>

</html>